<template>
    <div>
        <div class="details-con">
            <div class="details-tab">
                <span>合作</span>
                <img src="@/assets/image/ic_arrow_r.png" style="width: 16px;margin: 0 16px;position: relative;top: -2px;">
                <span class="cl00a274">我{{ detailsData.type === 1 ? '需要' : '提供' }}...</span>
            </div>
            <div class="details-center">
                <div class="details-title">
<!--                    <span>{{ detailsData.type === 1 ? '需要' : '提供' }}</span>-->
                  <span class="clfff given" :class="detailsData.type === 1 ? 'givenScc' : ''">{{ detailsData.type === 1 ? '需要' : '提供' }}</span>
                  {{ detailsData.type === 1 ? '我需要' : '我提供' }}{{ detailsData.requirementTitle }}
                </div>
                <div class="details-time">
                    <div class="times">{{ detailsData.createTime.slice(0,10) }}</div>
                    <div class="yan">
                        <span>
                            <img src="@/assets/image/liulian_icon.png">
                            {{ detailsData.viewCount }}
                        </span>
                        <span style="cursor: pointer" @click="jubao">
                            <img src="@/assets/image/jubao_icon.png">
                            举报
                        </span>
                    </div>
                </div>
                <div class="username" v-if="detailsData.user">
                    <div class="userHeader">
                        <img :src="detailsData.user.avatar || 'https://www.uqudao.com/ImageCrop?src=https://www.uqudao.com/files/avatar/avatar_404.png&amp;w=50&amp;h=50'" style="width: 22px;height: 22px;object-fit: cover;" class="common_avatar">
                    </div>
                    {{ detailsData.user.nickname || '匿名' }}
                    <template v-if="detailsData.type === 2">
                      <span style="margin-left: 0.5rem;" v-if="detailsData.user.companyName"> {{ detailsData.user.companyName }} · {{ detailsData.user.jobTitle }}</span>
                    </template>
                </div>
                <div class="content">
                  {{ detailsData.type === 1 ? '我们需要' : '我们提供'}}
                  <span v-for="item in detailsData.domainList">{{ item.requirementDomainName }}</span>
                </div>
                <div class="risk">风险提醒：用户的身份及其所发布的信息仅供参考，本平台不做保障。请注意防范风险，规范合作流程，参考  <router-link to="/articleDetail?id=2" style="color: red" class="redd" target="_blank">《防骗指南》</router-link> 谨防骗子！</div>
                <div class="contentDesc">{{ detailsData.requirementDesc }}</div>
                <div v-if="detailsData.imageList && detailsData.imageList.length > 0" style="display: flex;flex-wrap: wrap">
                  <div v-for="item in detailsData.imageList" style="margin-right: 10px">
                    <el-image :src="item" :crossorigin="null" style="width: 100px" :preview-src-list="detailsData.imageList" />
                  </div>
                </div>
                <div class="contact">联系方式</div>
                <div class="contract_bg">
                    <div :class="(!isLogin || !detailsData.isDocking) ? 'contract_blur' : ''">
                        <p style="font-size: 16px;line-height: 40px;">
                            <span class="mg10 middle mr40" style="width: 200px;cursor: pointer" @click="copy(0)">
                              <img src="@/assets/image/mobile_icon.png" class="common_icon_contract mr10">
                              {{ detailsData.isDocking ? detailsData.requirementContactMobile : '对 接 后 可 见' }}
                            </span>
                            <span class="mg10 middle" style="cursor: pointer" @click="copy(1)">
                              <img src="@/assets/image/wechat_icon.png" class="common_icon_contract mr10">
                              {{ detailsData.isDocking ? detailsData.requirementWechat : '对 接 后 可 见' }}
                            </span>
                        </p>
                        <p style="line-height: 40px;">
                            <span class="mg10 cl999" style="margin: 0 15px 0 0;font-size: 12px">注：联系时请主动出示来源会员身份，否则可能被拒绝！</span>
                        </p>
                    </div>
                    <div class="contract_mes" v-if="!isLogin">
                        <p class="clfff letter-space" style="margin-top: 30px;">登录后可申请对接该需求方</p>
                        <a href="javascript:void(0)" @click="dialogTableVisible = true">
                            <p class="clfff change_btn commonbg ml8" style="width: 60px;">立即登录</p>
                        </a>
                    </div>
                    <div v-if="isLogin && !detailsData.isDocking">
                      <div class="contract_mes">
                        <p class="clfff letter-space" style="margin-top: 30px;">今天您还有{{ detailsData.type === 1 ? needLimit : provideLimit }}次对接机会</p>
                        <a href="javascript:void(0)" @click="dockingFun">
                          <p class="clfff change_btn commonbg ml8" style="width: 60px;">对接</p>
                        </a>
                      </div>
                    </div>
                </div>
            </div>

            <div class="detectLeakage">
              <div class="detectLeakage-title">推荐你来捡漏</div>
              <div class="detectLeakage-list">
                <div class="detectLeakage-one" v-for="item in lists" @click="viewDetails(item.id)">
                  <div class="words">
                    <span class="clfff given" :class="item.type === 1 ? 'givenScc' : ''">{{ item.type === 1 ? '需要' : '提供' }}</span>
                    <span class="cl999 given_right">{{ item.type === 1 ? '我需要' : '我提供' }}{{ item.requirementTitle }}</span>
                    <span class="time_num">
                      {{ getDateDiff(item.createTime) }} ·
                      <img src="@/assets/image/liulian_icon.png" alt="">
                      {{ item.viewCount }}
                    </span>
                  </div>
                  <div class="words" v-if="item.requirementDesc.length > 0">
                    {{ item.requirementDesc }}
                  </div>
                </div>
              </div>
            </div>
        </div>
      <login :dialogTableVisible="dialogTableVisible" @cancelLogin="cancelLoginFun" :redirect="'https://www.qchuhai.com/#/details?id=' + detailsData.id" />
      <report :detailsTitle="(detailsData.type === 1 ? '我需要' : '我提供') + detailsData.requirementTitle" :showAlertBool="showAlert" :requirementId="detailsData.id" @cancelEmit="cancelFun" />
      <bindingDom :dialogTableVisible="dialogTableVisiblePhone" @cancelLogin="cancelBinFun" />
    </div>
</template>
<script setup lang="ts">
import {detailApi, requirementDocking, requirementLimit, requirementList, scanLogin, userInfoApi} from '@/api/api'
import { useRouter, useRoute } from 'vue-router';
import login from '@/layout/components/login.vue'
import {ref} from "vue";
const router = useRouter();
const route = useRoute();
const dialogTableVisible = ref(false)
import { useSysStore } from "@/store/user";
import { toRefs } from 'vue'
import { ElMessage } from "element-plus";
import report from './components/report.vue'
import bindingDom from './components/binding.vue'
const dialogTableVisiblePhone = ref(false)
const { isLogin, userInfo } = toRefs(useSysStore());
const needLimit = ref(0)
const provideLimit = ref(0)
interface detailsInterface {
  viewCount?: number
  requirementTitle?: string
  type?: number
  createTime: string
  user: {
    avatar: string
    nickname: string
    companyName: string
    jobTitle: string
  },
  domainList?: [],
  imageList?: []
  requirementDesc?: string
  isDocking?: boolean
  requirementContactMobile?: string
  requirementWechat?: string
  id?: string
}
const showAlert = ref(false)
const detailsData = ref<detailsInterface>({
  createTime: '',
  user: {
    avatar: '',
    nickname: '',
    companyName: '',
    jobTitle: ''
  }
})
interface ListInterface {
  requirementTitle: string
  type: number
  user: any
  createTime: string
  domainList: any
  areaList: any
  id:any
  companyName: string
  jobTitle: string
  viewCount: number
  requirementDesc: string
}
const lists = ref<ListInterface[]>([])
if (!isLogin.value) {
  let code = route.query.code
  let state = route.query.state
  if (code) {
    let codeForm = {
      code: code,// 关键
      state: state,
    }
    // 调微信登录的后端接口
    scanLogin(codeForm).then((res:any) => {
      if (res.code === 200) {
        dialogTableVisible.value = true
        ElMessage.success('登录成功')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('isLogin', String(true))
        isLogin.value = true
        dialogTableVisible.value = false
        getUserInfo()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}
const getUserInfo = () => {
  userInfoApi().then((res:any) => {
    userInfo.value = JSON.stringify(res.data)
    localStorage.setItem('userInfo', JSON.stringify(res.data))
  })
}
const cancelFun = () => {
  showAlert.value = false
}
const jubao = () => {
  if (!isLogin.value) {
    ElMessage.warning("请先登录！")
    dialogTableVisible.value = true
    return false
  }
  showAlert.value = true
}
const getDetails = () => {
  detailApi({
    id: route.query.id
  }).then((res:any) => {
    detailsData.value = res.data
  })
}
getDetails()
const cancelLoginFun = () => {
  dialogTableVisible.value = false
  if (isLogin.value) {
    getLimit()
  }
}
const getDateDiff = (dateStr:any) =>{
  let dateTimeStamp = Date.parse(dateStr.replace(/-/gi,"/"));
  let minute = 1000 * 60
  let hour = minute * 60
  let day = hour * 24
  let result = ''
  let month = day * 30
  let now = new Date().getTime()
  let diffValue = now - dateTimeStamp
  if(diffValue < 0){return;}
  let monthC =diffValue/month
  let weekC =diffValue/(7*day)
  let dayC =diffValue/day
  let hourC =diffValue/hour
  let minC =diffValue/minute
  if(monthC>=1){
    result="" + parseInt(String(monthC)) + "月前"
  }
  else if(weekC>=1){
    result="" + parseInt(String(weekC)) + "周前"
  }
  else if(dayC>=1){
    result=""+ parseInt(String(dayC)) +"天前"
  }
  else if(hourC>=1){
    result=""+ parseInt(String(hourC)) +"小时前"
  }
  else if(minC>=1){
    result=""+ parseInt(String(minC)) +"分钟前"
  }else
    result="刚刚";
  return result;
}
// 对接
const dockingFun = () => {
  if (detailsData.value.type === 1 && needLimit.value <= 0) {
    ElMessage.warning('今日对接次数已用尽，请咨询客服')
    return false
  }
  if (detailsData.value.type === 2 && provideLimit.value <= 0) {
    ElMessage.warning('今日对接次数已用尽，请咨询客服')
    return false
  }
  requirementDocking({
    requirementId: route.query.id
  }).then((res:any) => {
    if (res.code === 200) {
      ElMessage.success('对接成功')
      dockingInfo()
    } else {
      ElMessage.warning(res.msg)
    }
  })
}
// 获取对接信息
const dockingInfo = () => {
  getDetails()
}
// 获取权限数量
const getLimit = () => {
  requirementLimit().then((res:any) => {
    needLimit.value = res.data.needLimit
    provideLimit.value = res.data.provideLimit
  })
}
if (isLogin.value) {
  getLimit()
}
// 获取推荐列表
const detectLeakage = () => {
  requirementList({
    pageNo: 1,
    pageSize: 7,
    isRandom: '1',
  }).then((res:any) => {
    lists.value = res.data.lists
  })
}
detectLeakage()
const copy = (data:number) => {
  if (isLogin.value && detailsData.value.isDocking) {
    let input = document.createElement("input");
    document.body.appendChild(input);
    if (data === 0) {
      input.value = <string>detailsData.value.requirementContactMobile; // 此处为需要复制的文本变量
    } else {
      input.value = <string>detailsData.value.requirementWechat;
    }
    input.select();
    try {
      let result = document.execCommand("copy");
      document.body.removeChild(input);
      if (!result) {
        console.error("复制失败");
      } else {
        ElMessage.success((data === 0 ? '手机号' : '微信号') + '复制成功');
      }
    } catch (e) {
      document.body.removeChild(input);
      alert("当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作");
    }
  }
}
const viewDetails = (id:any) => {
  router.push('/details?id=' + id)
}
const cancelBinFun = () => {
  dialogTableVisiblePhone.value = false
}
</script>
<style scoped>
.detectLeakage{
  padding: 20px 30px;
  border-radius: 5px;
  background: #fff;
  margin-top: 30px;
}
.detectLeakage-title{
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.detectLeakage-one{
  padding: 22.5px 0;
  border-bottom: 0.5px solid #e4e4e4;
  cursor: pointer;
}
.detectLeakage-one:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.words {
  font-size: 14px;
  letter-spacing: 0px;
  color: #666666;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: flex;
}
.given {
  color: #fff;
  padding: 2px 8px;
  margin-right: 13px;
  border-radius: 4px;
  background-color: #409eff;
  display: inline-block;
  position: relative;
  font-size: 12px;
  height: 1.1rem;
}
.givenScc {
  background-color: #8ac4ff;
}
.given_right {
  position: relative;
  left: -5px;
}
.cl999 {
  color: #999;
}
.time_num {
  font-size: 14px;
  letter-spacing: 0px;
  color: #999999;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.time_num img{
  width: 14px;
  margin-right: 5px;
  margin-left: 5px;
}
.details-con{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}
.details-center{
    background: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px 30px;
}
.details-title span{
  color: #fff;
  font-size: .625rem;
  padding:.1rem 0.25rem;
  background-color: #409eff;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
  height: 1.2rem;
  line-height: 1.2rem;
}
.details-title{
  font-size: 20px;
  top: 2px;
  left: -5px;
  letter-spacing: 1px;
}
.details-tab{
  display: flex;
  color: #999;
  align-items: center;
  margin: 20px 0;
}
.cl00a274{
  color: #409eff;
}
.times{
  color: #999;
}
.details-time{
  margin-top: 10px;
  display: flex;
  text-align: left;
}
.yan{
    margin-left: auto;
    display: flex;
}
.yan span{
    display: flex;
    align-items: center;
    margin-left: 3px;
    margin-right: 10px;
    font-size: 14px;
    color: #999;
}
.yan span img{
    width: 14px;
    height: 9px;
    margin-right:2px;
}
.username {
    display: flex;
    margin-top: 20px;
    font-size: 14px;
    align-items: center;
    color: #999;
}
.userHeader{
    margin-right: 8px;
}
.userHeader img{
    display: block;
    border-radius: 10px;
}
.content{
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
    vertical-align: middle;
    display: inline-block;
}
.content span{
    color: #fff;
    padding: 2px 8px;
    margin-right: 13px;
    border-radius: 50px;
    background-color: #c2c2c2!important;
    display: inline-block;
    position: relative;
    font-size: 12px;
    margin-left: 8px;
}
.risk{
    padding: 14px;
    border-radius: 4px;
    background-color: #fbf6ed;
    box-sizing: border-box;
    margin: 20px 0;
    font-size: 14px;
    color: #666;
}
.contentDesc{
    color: #999;
    margin: 20px 0;
    letter-spacing: 1px;
    word-wrap: break-word;
    width: 100%;
    font-size: 14px;
    white-space: pre-wrap;
}
.contact{
    font-weight: bold;
    margin-top: 30px;
    font-size: 14px;
    color: #333;
}
.contract_bg{
    padding: 10px 20px 10px 5px;
    position: relative;
    margin-top: 20px;
}
.contract_blur {
    filter: blur(3px);
}
.mr40 {
    margin-right: 40px;
}
.middle {
    vertical-align: middle;
    display: inline-block;
}
.common_icon_contract {
    width: 15px;
    display: inline-block;
    position: relative;
    top: -1px;
}
.mr10 {
    margin-right: 10px;
}
.contract_mes {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    border-radius: 6px;
    text-align: center;
    z-index: 2;
}
.letter-space {
    letter-spacing: 2px;
    font-size: 14px;
}
.clfff {
    color: #fff;
}
.change_btn {
    color: #fff;
    padding: 3px 11px;
    border-radius: 13px;
    background: #409eff;
    width: 44px;
    margin: 10px auto;
    text-align: center;
    cursor: pointer;
}
@media (min-width: 1280px) {
    .details-con{
        width: 1200px;
        margin: auto;
    }
}
</style>